<template>
	<view class="address-list-page">
		<view class="address-list" v-if="addresses.length > 0">
			<view class="address-item"
				  v-for="(address, index) in addresses"
				  :key="index"
				  @click="handleItemClick(address)"> <!-- 统一处理列表项点击 -->

				<!-- 管理模式下的选择框 -->
				<view class="checkbox-wrapper" v-if="isManaging" @click.stop="toggleSelect(address)">
					<view :class="['checkbox', address.selected ? 'checked' : '']">
						<uni-icons v-if="address.selected" type="checkmarkempty" size="20" color="#fff"></uni-icons>
					</view>
				</view>

				<view class="address-info">
					<view class="contact-line">
						<text class="name">{{ address.name }}</text>
						<text class="phone">{{ address.phone }}</text>
						<text class="tag default-tag" v-if="address.isDefault">默认</text>
					</view>
					<view class="address-detail">
						{{ address.province }} {{ address.city }} {{ address.district }} {{ address.street }} {{ address.detailAddress }}
					</view>
				</view>
				<!-- 非管理模式下的编辑按钮 -->
				<view class="edit-action" v-if="!isManaging" @click.stop="editAddress(address)"> <!-- 阻止事件冒泡 -->
					<uni-icons type="compose" size="22" color="#909399"></uni-icons>
				</view>
			</view>
		</view>
		<view class="empty-state" v-else>
			<image class="empty-icon" src="/static/empty_address.png" mode="widthFix"></image> <!-- 替换为你的空状态图 -->
			<text class="empty-text">还没有收货地址哦</text>
		</view>

		<!-- 底部操作栏 -->
		<view :class="['bottom-actions', isManaging ? 'bottom-actions-manage' : '']">
			<template v-if="isManaging">
				<button class="cancel-btn" @click="cancelManage">取消</button>
				<button class="delete-btn" @click="deleteSelectedAddresses" :disabled="selectedAddresses.length === 0">删除 ({{ selectedAddresses.length }})</button>
			</template>
			<template v-else> <!-- 非管理模式 -->
				<!-- 在非选择模式下才显示管理按钮 -->
				<button v-if="!isSelectMode" class="manage-btn" @click="startManage" :disabled="addresses.length === 0">管理</button>
				<button class="add-btn" @click="addAddress">
					<uni-icons type="plus" size="18" color="#303133" style="margin-right: 8rpx;"></uni-icons> <!-- 图标颜色与按钮文字颜色一致 -->
					添加收货地址
				</button>
			</template>
		</view>
		<!-- 占位，防止底部内容被悬浮栏遮挡 -->
		<view :style="{ height: bottomBarHeight + 'px' }"></view>

		<!-- 添加/编辑地址弹窗 -->
		<uni-popup ref="addressPopup" type="bottom" :mask-click="false">
			<view class="address-form-popup">
				<view class="popup-header">
					<text class="title">{{ isEditing ? '编辑收货地址' : '添加收货地址' }}</text>
					<uni-icons type="close" size="24" color="#999" @click="closeAddressForm"></uni-icons>
				</view>
				<view class="popup-body">
					<uni-forms ref="form" :modelValue="currentAddress" :rules="addressRules" validate-trigger="submit">
						<uni-forms-item label="收货人" name="name" required>
							<uni-easyinput v-model="currentAddress.name" placeholder="请填写收货人姓名"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="手机号码" name="phone" required>
							<uni-easyinput v-model="currentAddress.phone" placeholder="请填写手机号码" type="number" maxlength="11"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="所在地区" name="region" required>
							<picker mode="region" @change="bindLocationChange" :value="locationArray">
								<view class="item-content">
									<text class="item-value" :class="{'link-style': !currentAddress.region}">
										{{ currentAddress.region || '去选择' }}
									</text>
									<uni-icons type="right" size="16" color="#C0C4CC"></uni-icons>
								</view>
							</picker>
							<!--<uni-data-picker
								mode="region"
								v-model="currentAddress.region"
								:localdata="regionData"
								placeholder="请选择省/市/区"
								@change="onRegionChange"
								:clear-icon="false"
							></uni-data-picker>-->
						</uni-forms-item>
						<uni-forms-item label="详细地址" name="detailAddress" required>
							<uni-easyinput type="textarea" v-model="currentAddress.detailAddress" placeholder="街道、楼牌号等"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="设为默认地址">
							<switch :checked="currentAddress.isDefault == 1" @change="onDefaultChange" color="#ffc800" style="transform:scale(0.8)"></switch>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="popup-footer">
					<button class="save-btn" @click="saveAddress">保存地址</button>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
// 假设你的地区数据文件导出了一个对象，其中有一个属性叫 data，包含了地区数组
// 例如 module.exports = { data: [...] }; 或 export default { data: [...] };
import regionData from '@/common/region-data';
const app = getApp() // 假设 app 是你的全局应用实例

export default {
	components: {
		// ... (引入 uni-ui 组件，如果在 main.js 全局引入则不需要)
	},
	data() {
		return {
			isManaging: false, // 是否处于管理模式
			isSelectMode: false, // 是否处于选择模式
			addresses: [], // 地址列表数据
			addressesId: [], // 用于存储待删除的地址ID
			bottomBarHeight: 60, // 预估底部操作栏高度
			currentAddress: { // 当前正在编辑或添加的地址对象
				id: null, // 添加时通常没有ID，编辑时有
				name: '',
				phone: '',
				province: '', // 文本名称
				city: '',     // 文本名称
				district: '', // 文本名称
				street: '',
				detailAddress: '',
				isDefault: 0, // 0 非默认, 1 默认
				region: '', // 用于 uni-data-picker 绑定的 value 字符串 (如 "110000-110100-110105")
			},
			isEditing: false, // 是否处于编辑状态
			regionData: regionData.data || [], // 地区数据，注意访问了 .data 属性
			addressRules: { // 表单校验规则
				name: { rules: [{ required: true, errorMessage: '请输入收货人姓名' }] },
				phone: {
					rules: [
						{ required: true, errorMessage: '请输入手机号码' },
						{ pattern: /^1\d{10}$/, errorMessage: '请输入正确的手机号码' }
					]
				},
				// 注意：这里不直接使用 required: true 校验 region 字段，
				// 改为在 saveAddress 方法中手动校验 uni-data-picker 的值，更灵活可靠。
				// region: { rules: [{ required: true, errorMessage: '请选择所在地区' }] },
				detailAddress: { rules: [{ required: true, errorMessage: '请输入详细地址' }] }
			}
		};
	},
	computed: {
		locationArray() {
			if (this.currentAddress.region) {
				return this.currentAddress.region.split(' ');
			}
			return [];
		},
		selectedAddresses() {
			// 在管理模式下，返回 selected 为 true 的地址
			// 在非管理模式下（包括选择模式），这个计算属性不用于删除，但为了代码健壮性保留
			return this.addresses.filter(addr => addr.selected);
		}
	},
	onShow(){
		// 页面显示/从其他页返回时刷新地址列表
		this.getAddressList()
	},
	onLoad(options) {
		console.log('AddressListPage onLoad options:', options);
		uni.setNavigationBarTitle({
			title: '我的收货地址'
		});

		// 根据参数判断是否为选择模式
		// 假设从上一页导航过来时，会传递参数 isSelect=true
		if (options.isSelect && options.isSelect === 'true') {
			this.isSelectMode = true;
			uni.setNavigationBarTitle({
				title: '选择收货地址'
			});
		} else {
			this.isSelectMode = false;
		}

		// onShow 中会调用 getAddressList，这里不再重复调用，但需要初始化 selected 属性
		// getAddressList() 返回数据后，再对数据添加 selected 属性
	},
	// 在 getAddressList 成功获取数据后，为每个地址添加 selected 属性
	watch: {
		addresses: {
			handler(newAddresses) {
				newAddresses.forEach(addr => {
					// 确保 selected 属性存在，避免 $set 无法触发响应式
					if (typeof addr.selected === 'undefined') {
						this.$set(addr, 'selected', false);
					}
					// 确保 region 属性存在，用于uni-data-picker回显
					// 如果后端返回的数据没有 region 字段，需要根据 province city district 查找并设置
					if (!addr.region && (addr.province || addr.city || addr.district)) {
						addr.region = this.findRegionValue(addr.province, addr.city, addr.district);
					}
                     // 确保 isDefault 是数字 0 或 1
                    addr.isDefault = addr.isDefault ? 1 : 0;
				});
			},
			immediate: false, // watch addresses 初次加载时由 onShow 触发 getAddressList，不立即执行
			deep: true // 深度监听地址列表的变化
		}
	},
	onReady() {
		// 获取底部操作栏实际高度
		const query = uni.createSelectorQuery().in(this);
		query.select('.bottom-actions').boundingClientRect(data => {
		  if (data && data.height) {
		    // 加一点padding和安全区高度
		    this.bottomBarHeight = data.height + (uni.getSystemInfoSync().safeAreaInsets?.bottom || 0);
		  } else {
             // 如果查询失败，给一个默认高度
             this.bottomBarHeight = 100; // 预估高度 rpx 转 px roughly
          }
           console.log("bottomBarHeight:", this.bottomBarHeight);
		}).exec();
	},
	methods: {
		bindLocationChange(e) {
			this.currentAddress.region = e.detail.value.join(' '); // value 是一个数组 ['省', '市', '区']
		},
		// 获取地址列表
		getAddressList(){
			// 模拟 API 调用，实际项目中请替换为你的 API 调用
			// 注意：API 返回的数据结构可能与你的 currentAddress 结构有差异，需要做转换
			app.globalData.Request.post(app.globalData.ApiConstant.Address.list, {}, {showLoad : false}).then((res) => {
				console.log('getAddressList success:', res);
				if (res.success) {
					// 假设后端返回的数据数组在 res.data
					this.addresses = res.data || []; // 确保是数组
				} else {
					uni.showToast({ title: res.message || '获取地址列表失败', icon: 'none' });
				}
			}).catch((err) => {
				console.error('getAddressList error:', err);
				uni.showToast({ title: '获取地址列表失败', icon: 'none' });
			})
			// finally 里面不需要操作地址列表，因为 watch 已经监听并处理 selected 属性
		},

		// --- 列表项点击处理 ---
		handleItemClick(address) {
			if (this.isManaging) {
				// 管理模式下，点击切换选中状态
				this.toggleSelect(address);
			} else if (this.isSelectMode) {
				// 选择模式下，点击选中并返回
				this.selectAddressAndReturn(address);
			} else {
				// 非管理也非选择模式下，点击列表项可以执行其他操作，例如查看详情或直接进入编辑（如果没点击编辑图标）
				// 目前不实现，保留空或Toast
				console.log('Clicked address in normal view:', address);
				// uni.showToast({
				// 	title: `点击了地址：${address.name}`,
				// 	icon: 'none'
				// });
			}
		},

		// --- 管理模式相关方法 ---
		startManage() {
			this.isManaging = true;
			// 进入管理模式时，取消所有选中状态
			this.addresses.forEach(addr => {
				this.$set(addr, 'selected', false);
			});
		},
		cancelManage() {
			this.isManaging = false;
			// 退出管理模式时，取消所有选中状态
			this.addresses.forEach(addr => {
				this.$set(addr, 'selected', false);
			});
		},
		toggleSelect(address) {
			// 在管理模式下切换选中状态
			this.$set(address, 'selected', !address.selected);
		},
		deleteSelectedAddresses() {
			if (this.selectedAddresses.length === 0) {
				return;
			}

			const hasDefault = this.selectedAddresses.some(addr => addr.isDefault == 1);
			if (hasDefault) {
				uni.showToast({
					title: '无法删除默认地址，请先设置其他地址为默认',
					icon: 'none'
				});
				return;
			}

			uni.showModal({
				title: '确认删除',
				content: `确定删除选中的 ${this.selectedAddresses.length} 个收货地址吗？`,
				confirmColor: '#f56c6c', // 确认按钮颜色变红
				success: (res) => {
					if (res.confirm) {
						this.addressesId = this.selectedAddresses.map(item => item.id);
						console.log('Deleting addresses with IDs:', this.addressesId);

						// 模拟 API 调用，实际项目中请替换为你的 API 调用
						app.globalData.Request.post(app.globalData.ApiConstant.Address.delete, {
							ids: this.addressesId.join(',') // 假设删除接口接收逗号分隔的ID字符串
							// 如果接口接收ID数组，则传递 { ids: this.addressesId }
						}, {showLoad : true}).then((res) => {
							console.log('Delete success:', res);
							if(res.success){
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
								this.getAddressList(); // 刷新列表
							} else {
								uni.showToast({ title: res.message || '删除失败', icon: 'none' });
							}
						}).catch((err) => {
							console.error('Delete error:', err);
							uni.showToast({ title: '删除失败', icon: 'none' });
						}).finally(() => {
							this.cancelManage(); // 无论成功失败，删除操作结束，退出管理模式
						});
					}
				}
			});
		},

		// --- 添加/编辑地址弹窗相关方法 ---
		addAddress() {
			this.isEditing = false;
			// 初始化一个空地址对象
			this.currentAddress = {
				id: null, // 添加时没有ID
				name: '',
				phone: '',
				province: '',
				city: '',
				district: '',
				street: '',
				detailAddress: '',
				isDefault: 0,
				region: '', // uni-data-picker value
			};
			this.$refs.addressPopup.open('bottom');
			// 清除上次校验结果
			this.$nextTick(() => {
				// 确保表单和校验规则已渲染
				this.$refs.form && this.$refs.form.clearValidate();
			});
		},
		editAddress(address) {
			this.isEditing = true;
			// 深度复制地址对象，避免直接修改原数组数据
			this.currentAddress = JSON.parse(JSON.stringify(address));

			// 确保 isDefault 是 0 或 1
			this.currentAddress.isDefault = this.currentAddress.isDefault ? 1 : 0;

			// uni-data-picker 回显需要 region 字段，其格式是 "value1-value2-value3"
			// 如果后端返回数据没有 region 字段，需要根据 province city district 反查生成
			if (!this.currentAddress.region && (this.currentAddress.province || this.currentAddress.city || this.currentAddress.district)) {
				this.currentAddress.region = this.findRegionValue(this.currentAddress.province, this.currentAddress.city, this.currentAddress.district);
			}

			this.$refs.addressPopup.open('bottom');
			// 清除上次校验结果
			this.$nextTick(() => {
				this.$refs.form && this.$refs.form.clearValidate();
			});
		},
		closeAddressForm() {
			this.$refs.addressPopup.close();
		},
		onRegionChange(e) {
			console.log('RegionPicker change event:', e.detail);
			const selectedNodes = e.detail.value; // 这是一个数组，包含选中的省、市、区对象
			// 更新 province, city, district 文本字段
			this.currentAddress.province = selectedNodes[0] ? selectedNodes[0].text : '';
			this.currentAddress.city = selectedNodes[1] ? selectedNodes[1].text : '';
			this.currentAddress.district = selectedNodes[2] ? selectedNodes[2].text : '';
			this.currentAddress.region = e.detail.value.map(item => item.value).join('-');
			// v-model 已经绑定了 this.currentAddress.region = e.detail.value 数组中的 value 拼接字符串 (如 "110000-110100-110105")
			// 确保 region 字段是字符串格式，有时 v-model 绑定的是数组，取决于 uni-data-picker 版本和用法
            // 实际测试 uni-data-picker mode="region" v-model 绑定的是 "value1-value2-value3" 字符串
			// this.currentAddress.region = selectedNodes.map(item => item.value).join('-'); // v-model 已经做了，此处保留日志或移除

			// 手动触发表单对 region 字段的校验（如果启用了规则的话）
			// this.$refs.form.validateField("region");
		},
		onDefaultChange(e) {
			this.currentAddress.isDefault = e.detail.value ? 1 : 0; // switch 返回的是 boolean
		},
		async saveAddress() {
			console.log('Saving address:', JSON.parse(JSON.stringify(this.currentAddress)));

			// 触发表单除地区外的其他字段校验
			const formValid = await this.$refs.form.validate();
			if (!formValid) {
				console.log('Basic form validation failed.');
				return; // 校验失败
			}

			// 手动校验地区选择器，确保选择了至少省市或省市区
			const regionValue = this.currentAddress.region; // uni-data-picker 绑定的值
			console.log('Validating regionValue:', regionValue);

			if (!regionValue || typeof regionValue !== 'string' || regionValue.split(' ').length < 2) {
				uni.showToast({
					title: '请选择完整的所在地区 (至少到市)', // 或 '请选择省/市/区'
					icon: 'none'
				});
				console.log('Region validation failed.');
				return; // 地区校验失败
			}
			regionValue.split(' ').forEach((item,index)=>{
				if(index === 0){
					this.currentAddress.province = item
				}else if(index === 1){
					this.currentAddress.city = item
				}else if(index === 2){
					this.currentAddress.district = item
				}
			});

			// 调用保存地址的 API (添加或编辑共用一个接口通常需要根据 currentAddress.id 是否存在来判断)
			let address= this.currentAddress
			address.selected = undefined
			app.globalData.Request.post(app.globalData.ApiConstant.Address.save, address,
			{showLoad : true}).then((res) => {
				console.log('Save address success:', res);
				if(res.success){
					uni.showToast({ title: '操作成功', icon: 'success' });
					this.getAddressList(); // 刷新列表以获取最新数据和默认状态
					this.closeAddressForm(); // 保存成功后关闭弹窗
				} else {
					uni.showToast({ title: res.message || '保存失败', icon: 'none' });
				}
			}).catch((err) => {
				console.error('Save address error:', err);
				uni.showToast({ title: '保存失败', icon: 'none' });
			})
			// .finally(() => {}); // finally 里面不需要关闭弹窗，只在成功时关闭
		},

		selectAddressAndReturn(address) {
			console.log('Selecting address and returning:', address);
			// 触发事件，将选中的地址对象传递给监听者
			uni.$emit('selectedAddress', address);
			// 返回上一页
			uni.navigateBack({
				delta: 1 // 返回层数，1表示直接返回上一页
			});
		},

		// 辅助方法：根据省市区文本查找对应的 region value (简陋实现，实际应更完善)
		findRegionValue(provinceText, cityText, districtText) {
			console.log('Finding region value for:', provinceText, cityText, districtText);
			let value = '';
			if(provinceText){
				value+= provinceText
			}
			if(cityText){
				value+= ' ' + cityText
			}
			if(districtText){
				value+= ' ' + districtText
			}
			return value;
		}
	}
};
</script>

<style lang="scss" scoped>
.address-list-page {
	background-color: #f7f8fa;
	min-height: 100vh;
	// 使用计算属性 bottomBarHeight 来设置 padding-bottom
	// padding-bottom: calc(v-bind(bottomBarHeight)px);
}

.address-list {
	padding: 24rpx;
	.address-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);

		.checkbox-wrapper {
			width: 60rpx; // 为选择框预留空间
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx; // 与地址信息留间距
			flex-shrink: 0; // 防止在 flex 布局中被压缩

			.checkbox {
				width: 40rpx;
				height: 40rpx;
				border: 1px solid #dcdfe6;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				&.checked {
					background-color: #ffc800; // 闲鱼黄
					border-color: #ffc800;
				}
			}
		}

		.address-info {
			flex-grow: 1;
			margin-right: 20rpx;
            // 确保内容不会被编辑图标挤压
            min-width: 0;

			.contact-line {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
                flex-wrap: wrap; // 允许换行，防止挤压
				.name {
					font-size: 30rpx;
					font-weight: bold;
					color: #303133;
					margin-right: 20rpx;
                    flex-shrink: 0; // 姓名不压缩
				}
				.phone {
					font-size: 28rpx;
					color: #606266;
					margin-right: 15rpx;
                    flex-shrink: 0; // 手机号不压缩
				}
				.tag {
					font-size: 20rpx;
					padding: 2rpx 10rpx;
					border-radius: 4rpx;
                    flex-shrink: 0; // 标签不压缩
					&.default-tag {
						background-color: #fef0f0; // 浅红色背景
						color: #f56c6c; // 红色文字
						border: 1px solid #fde2e2;
					}
				}
			}
			.address-detail {
				font-size: 26rpx;
				color: #606266;
				line-height: 1.5;
                word-break: break-all; // 允许在任何字符间断行
			}
		}
		.edit-action {
			padding: 10rpx; // 增大点击区域
			flex-shrink: 0; // 防止被压缩
		}
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
	.empty-icon {
		width: 200rpx; // 根据实际图片调整
		margin-bottom: 30rpx;
	}
	.empty-text {
		font-size: 28rpx;
		color: #909399;
	}
}


.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	padding: 20rpx 24rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); /* 适配iPhone X等底部安全区域 */
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	z-index: 100;

	button {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		&::after {
			border: none;
		}
	}
	.manage-btn {
		background-color: #f5f5f5;
		color: #303133;
		width: 30%;
		margin-right: 20rpx;
		&:disabled {
			background-color: #e0e0e0;
			color: #a0a0a0;
		}
	}
	.add-btn {
		background-color: #ffc800; // 闲鱼黄
		color: #303133; // 文字颜色深一点对比更清晰
		flex-grow: 1;
		font-weight: bold;
	}

	&.bottom-actions-manage {
		// 管理模式下的按钮样式
		.cancel-btn {
			background-color: #f5f5f5;
			color: #303133;
			width: 30%;
			margin-right: 20rpx;
		}
		.delete-btn {
			background-color: #f56c6c; // 红色
			color: #fff;
			flex-grow: 1;
			font-weight: bold;
			&:disabled {
				background-color: #fab6b6; // 变浅
				color: #fff;
			}
		}
	}
}


/* 添加/编辑地址弹窗样式 */
.address-form-popup {
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding: 30rpx 0 0; // 顶部有标题区域，底部有按钮区域

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: #303133;
		}
	}
	.popup-body {
		padding: 30rpx;
		max-height: 60vh; // 限制最大高度，防止表单过长溢出屏幕
		overflow-y: auto; // 内容超出时滚动

		// 调整表单项内边距和样式
		::v-deep .uni-forms-item {
			padding: 0; // 重置默认padding
			margin-bottom: 40rpx; // 调整表单项间距

			.uni-forms-item__label {
				width: 150rpx !important; // 固定label宽度
				font-size: 28rpx;
				color: #303133;
				padding-right: 20rpx;
				box-sizing: border-box;
			}
			.uni-forms-item__content {
				flex: 1; // 占据剩余空间
			}
			.uni-easyinput__content {
				border-color: #eee !important; // 调整输入框边框颜色
				background-color: #f9f9f9; // 调整输入框背景色
				border-radius: 8rpx;
				padding: 10rpx 15rpx;
				height: auto; // 高度自适应
				line-height: 1.5;
			}
			.uni-easyinput__placeholder {
				color: #c0c4cc;
			}
			.uni-easyinput__content[type=textarea] {
				min-height: 100rpx; // 文本域最小高度
				padding: 15rpx;
			}
			.uni-data-picker { // Province/City/District Picker
				.uni-stat__selector {
					padding: 10rpx 15rpx;
					border: 1px solid #eee;
					background-color: #f9f9f9;
					border-radius: 8rpx;
					color: #303133;
					min-height: unset;
                    line-height: 1.5; // 调整行高
				}
				.uni-stat__selector-placeholder {
					color: #c0c4cc;
				}
                // 校验错误样式
                &.uni-forms-item--error {
                    .uni-stat__selector {
                         border-color: #f56c6c !important; // 红色边框
                    }
                }
			}
			.uni-switch {
				transform: scale(0.8); // 缩小开关
				transform-origin: right center; // 从右边缩放
			}
            .uni-forms-item__slot { // 覆盖 switch 的 flex 布局，使其靠右
                 width: 100%;
                 display: flex;
                 justify-content: flex-end;
            }
             // 覆盖校验错误提示文字样式
            .uni-forms-item__error {
                padding-top: 0 !important;
            }
		}
	}
	.popup-footer {
		padding: 20rpx 30rpx calc(20rpx + constant(safe-area-inset-bottom));
		padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid #f5f5f5;

		.save-btn {
			background-color: #ffc800; // 闲鱼黄
			color: #303133;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}
</style>